<template>
    <div class="hm-picture">
        <div class="img" @click="selectPicture" :value="showImg">
            <img :src="showImg" alt="">
        </div>
        <el-dialog
            title="选择素材"
            :visible.sync="dialogVisible"
            width="960px">
            <div>
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <!-- 素材库 -->
                    <el-tab-pane label="素材库" name="true">
                        <el-radio-group v-model="collect"  @change="isCollect">
                            <el-radio-button :label="false" >全部</el-radio-button>
                            <el-radio-button :label="true" >收藏</el-radio-button>
                        </el-radio-group>
                        <el-row :gutter="10">
                            <el-col :span="4" v-for="item in pictures" :key="item.id" @click.native="colletImg(item.url)">
                                <el-image :src="item.url" fit="cover" :class="{'active':item.url === imgUrl}"></el-image>
                            </el-col>
                        </el-row>
                        <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-size="per_page"
                            layout="total, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </el-tab-pane>
                    <!-- 上传图片 -->
                    <el-tab-pane label="上传图片" name="false">
                        <el-upload
                            class="avatar-uploader"
                            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
                            :headers="headers"
                            name="image"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="uploadUrl" :src="uploadUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <template v-slot:footer class="dialog-footer">
                <el-button @click="submitImg">取 消</el-button>
                <el-button type="primary" @click="submitImg">确 定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getPictureList } from '@/api/picture'
import { getToken } from '@/utils/storage'
import img from '../assets/default.png'
export default {
  name: 'HmPicture',
  props: ['value'],
  data () {
    return {
      pictures: [],
      total: 0,
      dialogVisible: false,
      activeName: 'true',
      collect: false,
      page: 1,
      per_page: 12,
      imgUrl: '',
      uploadUrl: '',
      showImg: this.value || img,
      headers: {
        Authorization: 'Bearer ' + getToken()
      }
    }
  },
  methods: {
    async getPictures () {
      const res = await getPictureList({
        page: this.page,
        per_page: this.per_page,
        collect: this.collect
      })
      if (res.status === 200) {
        this.pictures = res.data.data.results
        this.total = res.data.data.total_count
      }
    },
    selectPicture () {
      this.dialogVisible = true
      this.getPictures()
    },
    isCollect () {
      this.page = 1
      this.getPictures()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getPictures()
    },
    colletImg (url) {
      if (this.imgUrl === url) {
        this.imgUrl = ''
        return
      }
      this.imgUrl = url
    },
    beforeAvatarUpload (file) {
      if (['iamge/jpeg', 'image/png', 'image/gif'].includes(file.type)) return this.$message.error('请上传正确格式的图片')
      if (file.size / 1024 / 1024 > 2) return this.$message.error('上传图片大小不能超过2M')
    },
    handleAvatarSuccess (info) {
      this.uploadUrl = info.data.url
    },
    submitImg () {
      if (this.activeName) {
        if (!this.imgUrl) return this.$message.warning('请选择一张图片')
        this.showImg = this.imgUrl
      } else {
        if (!this.uploadUrl) return this.$message.warning('请上传图片')
        this.showImg = this.uploadUrl
      }
      this.$emit('input', this.showImg)
      this.dialogVisible = false
      this.imgUrl = ''
      this.uploadUrl = ''
    },
    handleClick () {}
  }
}
</script>

<style lang="less" scoped>
    .hm-picture {
        .img {
            img {
                width: 150px;
                height: 150px;
                cursor: pointer;
                display: block;
                object-fit: cover;
            }
        }
        .el-row {
            margin: 10px 0;
            .el-col {
                margin-top: 6px;
                .el-image {
                    cursor: pointer;
                    height: 110px;
                }
            }
        }
        .active {
            position: relative;
            &::before {
                position: absolute;
                content: '';
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0, 0, .4) url('~@/assets/selected.png') no-repeat center / 80px 80px;
            }
        }
        ::v-deep {
            .avatar-uploader {
                display: flex;
                justify-content: center;
            }
            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
                object-fit: cover;
            }
        }
    }
</style>
